/* logo-brand.css */

/* Logo区域样式 */
.logo-section {
    width: 100%;
    padding: 10px;  /* 减小内边距 */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;  /* LOGO 和文字之间的间距 */
}

/* 面板内容区域 */
.test-panel-content {
    display: flex;
    flex-direction: column;
    flex: 1;  /* 占用所有可用空间 */
    min-height: 0;  /* 允许flex子项在必要时收缩 */
    overflow: hidden; /* 控制子元素溢出 */
}

.test-groups-container {
    flex: 1 1 auto; /* 允许伸缩但优先伸展 */
    overflow-y: auto; /* 内容过多时可滚动 */
    min-height: 0; /* 允许收缩 */
}

#test-panel-logo {
    flex: 0 0 auto; /* 不参与伸缩 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;  /* 移除额外内边距 */
}

/* Logo容器 */
.logo-container {
    width: min(100px, 50%);  /* 更合理的响应式大小 */
    aspect-ratio: 1;
    margin: 0 auto;
    position: relative;
    transition: transform 0.3s ease;
    transform-origin: center center;
}

/* SVG Logo样式 */
.brand-logo {
    width: 100%;
    height: 100%;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 使用更有弹性的缓动函数 */
}

/* 外圈和笑脸的基础样式 */
.outer-ring {
    transition: stroke 0.5s ease;
}

.smile {
    transition: stroke 0.5s ease;
}

/* Brand info 容器 */
.brand-info {
    flex: 1;  /* 占据剩余空间 */
    min-width: 0;  /* 允许在必要时收缩 */
    color: #fff;
}

.brand-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
}

.version-info {
    font-size: 11px;
    opacity: 0.8;
    display: flex;
    gap: 6px;  /* 版本信息之间的间距 */
}

/* SVG Logo样式 */
.brand-logo {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

/* 问候语气泡 */
.greeting-bubble {
    position: absolute;
    left: 100%;  /* 定位到 LOGO 右侧 */
    top: 50%;    /* 垂直居中对齐 */
    transform: translate(10px, -50%) scale(0); /* 向右偏移10px，垂直居中，初始缩放为0 */
    background: white;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
    color: #1e293b;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* Hover时的颜色变化 */
.logo-container:hover .outer-ring {
    stroke: #22c55e;  /* 变为绿色 */
    stroke-width: 3;  /* 加粗外圈 */
    filter: drop-shadow(0 0 3px #22c55e);  /* 添加荧光效果 */
}

.logo-container:hover .smile {
    stroke: #fbbf24;  /* 变为金黄色 */
    stroke-width: 4;  /* 加粗笑脸 */
    filter: drop-shadow(0 0 2px #fbbf24);  /* 添加荧光效果 */
}

/* 为外圈添加渐变动画 */
@keyframes gradientRotate {
    0% {
        stroke: #3b82f6;
    }
    25% {
        stroke: #22c55e;
    }
    50% {
        stroke: #fbbf24;
    }
    75% {
        stroke: #ec4899;
    }
    100% {
        stroke: #3b82f6;
    }
}

.logo-container:hover .outer-ring {
    animation: gradientRotate 4s linear infinite;
}

/* 修改笑脸动画，添加颜色变化 */
@keyframes widenAndBounceWithColor {
    0%, 100% {
        transform: scaleX(1) translateY(0);
        stroke: #fbbf24;
    }
    50% {
        transform: scaleX(1.2) translateY(-2px);
        stroke: #22c55e;
    }
}

.logo-container:hover .smile {
    animation: widenAndBounceWithColor 1s ease-in-out infinite;
}

/* Hover 效果 */
.logo-container:hover .brand-logo {
    transform: scale(1.15) rotate(30deg); /* 增大旋转角度到15度，略微增加缩放 */
    filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.8));
}

.logo-container:hover .outer-ring-effect {
    animation: rotateFaster 8s linear infinite;
}

.logo-container:hover .robot-face {
    animation: rockFace 2s ease-in-out infinite;
}

.logo-container:hover .eye {
    animation: blink 3s infinite;
}

.logo-container:hover {
    transform: scale(1.05);
}

/* 问候语气泡 */
.greeting-bubble {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: white;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
    color: #1e293b;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 修改气泡的小三角形位置 */
.greeting-bubble::after {
    content: '';
    position: absolute;
    left: -6px;  /* 向左偏移三角形宽度 */
    top: 50%;    /* 垂直居中 */
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0; /* 修改边框宽度使三角形朝左 */
    border-style: solid;
    border-color: transparent white transparent transparent; /* 修改边框颜色使三角形朝左 */
}

/* 修改 hover 时的动画效果 */
.logo-container:hover .greeting-bubble {
    transform: translate(10px, -50%) scale(1); /* 保持右偏移，添加显示动画 */
    opacity: 1;
}

/* Logo 动画效果 */
.logo-container:hover .robot-body {
    transform-origin: center;
    animation: bounceAndRotate 1s ease-in-out infinite;
}

.logo-container:hover .smile {
    animation: widenAndBounce 1s ease-in-out infinite;
}

.logo-container:hover .eye {
    animation: blink 2.5s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes widen-smile {
    0%, 100% { d: "M45 70 Q60 80 75 70"; }
    50% { d: "M40 70 Q60 82 80 70"; }
}

@keyframes blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}
/* 分离动画效果 */
#test-panel-logo .logo-container:hover .brand-logo {
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}

/* 动画定义 */
@keyframes rotateFaster {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rockFace {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px) rotate(-2deg); }
    75% { transform: translateX(2px) rotate(2deg); }
}

@keyframes blink {
    0%, 95%, 100% { transform: scaleY(1); }
    97% { transform: scaleY(0.1); }
}

/* 定义新的动画关键帧 */
@keyframes bounceAndRotate {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-3px) rotate(5deg);
    }
}

@keyframes blinkAndGrow {
    0%, 90%, 100% {
        transform: scaleY(1) scale(1);
    }
    95% {
        transform: scaleY(0.1) scale(1.2);
    }
}

@keyframes widenAndBounce {
    0%, 100% {
        transform: scaleX(1) translateY(0);
    }
    50% {
        transform: scaleX(1.2) translateY(-2px);
    }
}

/* 添加整体旋转动画 */
.logo-container:hover {
    animation: shakeAndRotate 1s ease-in-out infinite;
}

@keyframes shakeAndRotate {
    0% {
        transform: rotate(-10deg);
    }
    25% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(-10deg);
    }
}